packages/raystack/components/popover/popover.module.css (1)

22-26: Consider extracting shared resets into a base/composed class.

outline: 0 and box-sizing: border-box are duplicated between .popover and .popoverUnstyled. Extracting them into a shared base class (e.g., .popoverBase) and composing in both would eliminate the repetition.

♻️ Proposed refactor

+.popoverBase {
+  outline: 0;
+  box-sizing: border-box;
+  animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 .popover {
-  outline: 0;
   overflow: hidden;
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
-  box-sizing: border-box;
   min-width: 120px;
   max-width: 18rem;
   padding: var(--rs-space-3);
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-soft);
   border: 1px solid var(--rs-color-border-base-primary);
   color: var(--rs-color-foreground-base-primary);
-  animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }

 .popoverUnstyled {
-  outline: 0;
-  box-sizing: border-box;
-  animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }

Then in popover.tsx, compose the base class via cva:

 const popover = cva(styles.popoverBase, {
   variants: {
     variant: {
-      default: styles.popover,
+      default: styles.popover,   // adds visual tokens on top of base
       unstyled: styles.popoverUnstyled
     }
   },

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/raystack/components/popover/popover.module.css` around lines 22 -
26, Duplicate resets (outline: 0 and box-sizing: border-box) exist in .popover
and .popoverUnstyled; extract them into a shared CSS class (e.g., .popoverBase)
in popover.module.css and remove the duplicates from both existing classes, then
update popover.tsx to compose .popoverBase with the existing classes (use the
cva composition or class merging used in the component) so both .popover and
.popoverUnstyled include the shared base styling.

apps/www/src/content/docs/components/filter-card/props.ts (2)

52-61: FilterCardItemProps in docs is narrower than the actual component interface.

The real implementation (filter-card-item.tsx) declares:

export interface FilterCardItemProps extends HTMLAttributes<HTMLDivElement> {
  label: string;
}

It inherits children, className, onClick, style, and all other HTML div attributes from HTMLAttributes. The docs interface only exposes label, children?, and className?, silently omitting the rest of the passthrough surface. Consider extending HTMLAttributes<HTMLDivElement> (or at least noting the omission) to keep the docs aligned with the actual API.

♻️ Proposed alignment

+import type { HTMLAttributes } from 'react';
+
-export interface FilterCardItemProps {
+export interface FilterCardItemProps extends HTMLAttributes<HTMLDivElement> {
   /** Label text displayed on the left */
   label: string;
-
-  /** Action content displayed on the right */
-  children?: React.ReactNode;
-
-  /** Additional CSS class names */
-  className?: string;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/www/src/content/docs/components/filter-card/props.ts` around lines 52 -
61, The docs interface FilterCardItemProps is too narrow compared to the real
component (see filter-card-item.tsx); update the docs declaration to extend
HTMLAttributes<HTMLDivElement> so it includes children, className, onClick,
style and other passthrough div attributes (i.e., make FilterCardItemProps
extend HTMLAttributes<HTMLDivElement> to align the docs with the
implementation).

---

1-7: Add explicit React import for React.ReactNode.

React.ReactNode is used across all four interfaces in this .ts file without importing React. While the code likely compiles due to implicit type resolution, this pattern is inconsistent with best practices observed elsewhere in the codebase (e.g., breadcrumb, code-block, datatable props files explicitly import React types). Adding an explicit import makes the dependency clear and avoids relying on implicit resolution.

♻️ Proposed fix

+import type { ReactNode } from 'react';
+
 export interface FilterCardProps {
   /** Content of the filter card */
-  children?: React.ReactNode;
+  children?: ReactNode;
 
   /** Additional CSS class names */
   className?: string;
 }
 
 export interface FilterCardSectionProps {
   /** Optional title for the section */
   title?: string;
 
   /** Content of the section */
-  children?: React.ReactNode;
+  children?: ReactNode;
   ...
 }
 
 export interface FilterCardItemProps {
   /** Label text displayed on the left */
   label: string;
 
   /** Action content displayed on the right */
-  children?: React.ReactNode;
+  children?: ReactNode;
   ...
 }
 
 export interface FilterCardFooterProps {
   /** Content of the footer */
-  children?: React.ReactNode;
+  children?: ReactNode;
   ...
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/www/src/content/docs/components/filter-card/props.ts` around lines 1 -
7, Add an explicit type-only React import at the top of the file so the uses of
React.ReactNode in FilterCardProps (and the other three interfaces in this file)
are resolved explicitly; e.g., add "import type * as React from 'react'"
(type-only to avoid runtime import), keep the existing React.ReactNode type
annotations in FilterCardProps and the other interfaces unchanged.

Configuration used: defaults

Review profile: CHILL

Plan: Pro